<template>
  <el-dialog v-loading="loading" title="银行卡信息" :visible.sync="detailOpen" width="50%" append-to-body>
    <el-form  ref="form" :model="detail" label-width="120px">
      <h3>基本信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卡唯一编号: ">
              {{ detail.cardId }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卡号: ">
              {{ detail.cardNo }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卡模式: ">
              <dict-tag :options="dict.type.card_mode" :value="detail.cardMode"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卡本币: ">
              {{ detail.currency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="发卡商: ">
              {{ detail.network }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="申请时间: ">
              {{ parseTime(detail.createTime) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="累计消费金额: ">
              {{ detail.statisticsConsumption }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="累计撤销金额: ">
              {{ detail.statisticsReversal }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="累计撤销手续费金额: ">
              {{ detail.statisticsReversalFee }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="累计退款金额: ">
              {{ detail.statisticsRefund }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="累计退款手续费金额: ">
              {{ detail.statisticsRefundFee }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="状态: ">
              <dict-tag :options="dict.type.interlace_card_status" :value="detail.status"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h3>持卡人信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="姓氏: ">
              {{ detail.lastName }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="名字: ">
              {{ detail.firstName }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号代码: ">
              {{ detail.phoneCode }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机号: ">
              {{ detail.phone }}
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h3>账单地址</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="国家: ">
              {{ detail.billingAddressCountry }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="州/省: ">
              {{ detail.billingAddressState }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="城市: ">
              {{ detail.billingAddressCity }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址1: ">
              {{ detail.billingAddressLine1 }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="详细地址2: ">
              {{ detail.billingAddressLine2 }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮政编码: ">
              {{ detail.billingAddressPostalCode }}
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <template v-if="detail.ship">
        <h3>实体卡邮寄信息</h3>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="姓氏: ">
                {{ detail.ship.lastName }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="名字: ">
                {{ detail.ship.firstName }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="手机号代码: ">
                {{ detail.ship.phoneCode }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="手机号: ">
                {{ detail.ship.phone }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="国家: ">
                {{ detail.ship.shipCountry }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="州/省: ">
                {{ detail.ship.shipState }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="城市: ">
                {{ detail.ship.shipCity }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="详细地址1: ">
                {{ detail.ship.shipAddressLine1 }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="详细地址2: ">
                {{ detail.ship.shipAddressLine2 }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="邮政编码: ">
                {{ detail.ship.postalCode }}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="detailOpen = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDetail } from "@/api/triones/interlaceCard";
export default {
  name: "bankDetail",
  dicts: ['card_mode', 'interlace_card_status'],
  data() {
    return {
      detailOpen: false,
      detail: {
        ship: {}
      },
      loading: false
    };
  },
  methods: {
    show(id) {
      this.getDetail(id);
      this.detailOpen = true;
    },
    /** 银行卡详情 */
    getDetail(id) {
      this.loading = true;
      getDetail(id).then(response => {
        this.detail = response.data;
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>

</style>
